<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小作文 - 乐考无忧</title>
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="assets/css/bootstrap-icons.css">
    <style>
        body {
            background-color: #f0f9f9;
        }
        .header {
            padding: 15px;
            background: white;
            position: sticky;
            top: 0;
            z-index: 1000;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }
        .writing-container {
            padding: 20px;
            background: white;
            margin: 15px;
            border-radius: 15px;
        }
        .question-info {
            color: #666;
            font-size: 0.9rem;
            margin-bottom: 15px;
        }
        .writing-prompt {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 10px;
            margin-bottom: 20px;
        }
        .writing-area {
            width: 100%;
            min-height: 300px;
            border: 1px solid #dee2e6;
            border-radius: 10px;
            padding: 15px;
            margin-bottom: 20px;
            resize: none;
        }
        .word-count {
            color: #666;
            text-align: right;
            font-size: 0.9rem;
        }
        .writing-tips {
            background: #fff3cd;
            padding: 15px;
            border-radius: 10px;
            margin-bottom: 20px;
        }
        .tips-title {
            color: #856404;
            margin-bottom: 10px;
            font-weight: bold;
        }
        .timer {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background: rgba(0,0,0,0.7);
            color: white;
            padding: 8px 15px;
            border-radius: 20px;
            font-size: 0.9rem;
        }
    </style>
</head>
<body>
    <!-- 头部 -->
    <div class="header d-flex align-items-center">
        <a href="english-exam.html" class="text-dark"><i class="bi bi-chevron-left fs-4"></i></a>
        <h5 class="mb-0 mx-auto">2022年小作文</h5>
    </div>

    <!-- 写作区域 -->
    <div class="writing-container">
        <div class="question-info">
            <span class="badge bg-primary me-2">Part A</span>
            <span>建议用时：20分钟</span>
        </div>

        <!-- 写作提示 -->
        <div class="writing-prompt">
            <p class="mb-2">Directions:</p>
            <p>Suppose you are organizing a campus workshop on digital photography. Write an email to international students at your university to</p>
            <ol>
                <li>introduce the workshop briefly, and</li>
                <li>invite them to participate.</li>
            </ol>
            <p>You should write about 100 words on the ANSWER SHEET.</p>
            <p>Do not sign your own name at the end of the email. Use "Li Ming" instead.</p>
        </div>

        <!-- 写作技巧提示 -->
        <div class="writing-tips">
            <div class="tips-title">
                <i class="bi bi-lightbulb"></i>
                写作要点提示
            </div>
            <ul class="mb-0">
                <li>注意格式：包含称呼、正文、结尾署名</li>
                <li>第一段：简要介绍workshop的基本信息（时间、地点、内容）</li>
                <li>第二段：说明参与的好处，表达诚挚邀请</li>
                <li>语言要正式得体，符合邮件写作规范</li>
            </ul>
        </div>

        <!-- 答题区域 -->
        <textarea class="writing-area" placeholder="在此输入你的答案..."></textarea>
        <div class="word-count">字数：<span id="wordCount">0</span>/100</div>

        <!-- 提交按钮 -->
        <div class="d-flex gap-2">
            <button class="btn btn-primary flex-grow-1">提交答案</button>
            <a href="english-small-writing-explanation.html" class="btn btn-outline-primary">
                <i class="bi bi-journal-text"></i>
                查看范文
            </a>
        </div>
    </div>

    <!-- 计时器 -->
    <div class="timer">
        <i class="bi bi-clock"></i>
        <span id="timer">20:00</span>
    </div>

    <script>
        // 字数统计
        const textarea = document.querySelector('.writing-area');
        const wordCountSpan = document.getElementById('wordCount');

        textarea.addEventListener('input', function() {
            const words = this.value.trim().split(/\s+/);
            const count = this.value.trim() ? words.length : 0;
            wordCountSpan.textContent = count;
        });

        // 计时器
        let timeLeft = 20 * 60; // 20分钟
        const timerElement = document.getElementById('timer');

        function updateTimer() {
            const minutes = Math.floor(timeLeft / 60);
            const seconds = timeLeft % 60;
            timerElement.textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
            
            if (timeLeft > 0) {
                timeLeft--;
                setTimeout(updateTimer, 1000);
            }
        }

        updateTimer();
    </script>
</body>
</html>
